<template>
  <div>
    <div>{{ age }}</div>
    <div>{{ state.info.num }}</div>
    <button @click="age++">age自加</button>
    <button @click="state.info.num = 666">info键值</button><br />
  </div>
</template>

<script>
import { watch, ref, reactive } from "vue";
export default {
  setup() {
    const age = ref(18);
    const state = reactive({
      name: "BraveY",
      age: 18,
      info: {
        num: 20,
      },
    });
    watch(
      () => {
        return age.value;
      },
      () => {
        console.log("age发生了变化");
      },
      {
        immediate: true,
      }
    );
    watch(
      () => {
        return state;
      },
      () => {
        console.log("state发生了变化");
      },
      {
        deep: true,
      }
    );
    return {
      age,
      state,
    };
  },
};
</script>

<style>
</style>